<template>
	<view class="content">
		<view class="nav_cont">
			<view class="nav_cont_item" @tap="changeNav0" @touchmove.stop.prevent="moveHandle">
				<view class="nav_item" :class="[leftNavSwitch ? 'nav_item_active' : '']">
					<i class="nav_icon iconfont iconkemuguanli" style="font-size:44upx"></i>
					<view class="nav_title">{{ leftNavExhibition }}</view>
					<i class="nav_icon iconfont iconjiantou icon_more"></i>
				</view>
			</view>
			<view class="nav_cont_item" @tap="changeNav2">
				<view class="nav_item" :class="[centerNavSwitch ? 'nav_item_active' : '']">
					<i class="nav_icon iconfont iconzonglaiyuanbiaoshu1" style="font-size:44upx"></i>
					<view class="nav_title">{{ centerNavExhibition }}</view>
					<i class="nav_icon iconfont iconjiantou icon_more"></i>
				</view>
			</view>
			<view class="nav_cont_item" @tap="changeNav1">
				<view class="nav_item" :class="[rightNavSwitch ? 'nav_item_active' : '']" style="border-right:none">
					<i class="nav_icon iconfont iconzuoyeleixing"></i>
					<view class="nav_title">{{ rightNavExhibition }}</view>
					<i class="nav_icon iconfont iconjiantou icon_more"></i>
				</view>
			</view>
		</view>
		<view class="cont">
			<view class="none" v-if="datas.length == 0">没有数据</view>
			<view class="item_content" v-for="(items, id) in datas" :key="items.id" v-show="items.is_check">
				<view v-if="items.source_type==1" class="question_classify">作业</view>
				<view v-if="items.source_type==2" class="question_classify">自测</view>
				<view v-if="items.source_type==3" class="question_classify">同步</view>
				<view v-if="items.source_type==4" class="question_classify">趣练</view>
				<view v-if="items.source_type==5" class="question_classify">智测</view>
				<view class="question_text">
					<view class="title"><rich-text :nodes="items.question_title"></rich-text></view>
				</view>
				<view v-show="items.is_show" class="isshow">
					<view v-for="(tic_item, value) in items.answer_list" :key="value" class="topic">
						<rich-text :nodes="tic_item.answer"></rich-text>
						<!-- <text>{{tic_item}}</text> -->
					</view>
					<view class="answer_collect">
						<view class="answer">
							<view class="correct">
								<!-- {{items.answer}} -->
								<rich-text :nodes="'正确答案：' + items.answer"></rich-text>
							</view>
							<!-- <view class="error" v-if="items.last_answer!=''"><rich-text :nodes="'我的答案：' + items.last_answer"></rich-text></view>
							<view class="error" v-if="items.last_answer==''"><rich-text :nodes="'我的答案：未作答'"></rich-text></view> -->
						</view>
					</view>
					<view class="jtext" v-show="items.describe">
						<text class="analysis_title">知识点：</text>
						<rich-text :nodes="items.describe"></rich-text>
					</view>
					<view class="jtext">
						<text class="analysis_title">题目解析：</text>
						<rich-text :nodes="items.question_analysis"></rich-text>
					</view>
				</view>
				
				<view class="testing_error">
					<view class="error_number" @tap="showAnswer(id)">
						<text v-if="!items.is_show" >解析</text>
						<text v-else @tap="showAnswer(id)">收起</text>
						<i class="iconfont iconjiantou" style="color: #999999;"></i>
					</view>
					<!-- <view @click="check_collect(id, items.question_id)" class="collect">
						<i class="iconfont " :class="[items.is_check ? 'iconpingjiaxingxing' : 'iconpingjiaxingxing-xian']"></i>
						<text>收藏</text>
					</view> -->
				</view>
			</view>
			<uni-load-more v-if="datas.length > 2"  :status="status" :content-text="contentText" />
		</view>
		
		<!-- 弹窗背景 -->
		<scroll-view scroll-y="true" class="nav_type" v-if="leftNavSwitch" @tap="closeNavSwitch" @touchmove.stop.prevent="moveHandle">
			<view class="type_item" v-for="(item,index) in allProject" :key="index" @tap="getCurrentleft(item.sid, index, item.subject_name)">
				<text :class="[index == currentLeftNum ? 'name_active' : '']">{{item.subject_name}}</text>
				<i v-if="index == currentLeftNum" class="iconfont iconduigou"></i>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="nav_type" v-if="centerNavSwitch" @tap="closeNavSwitch" @touchmove.stop.prevent="moveHandle">
			<view class="type_item" v-for="(item,index) in allfrom" :key="index" @tap="getCurrentcenter(item.source_type, index, item.title)">
				<text :class="[index == currentCenterNum ? 'name_active' : '']">{{item.title}}</text>
				<i v-if="index == currentCenterNum" class="iconfont iconduigou"></i>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="nav_type" v-if="rightNavSwitch" @tap="closeNavSwitch" @touchmove.stop.prevent="moveHandle">
			<view class="type_item" v-for="(item,index) in allType" :key="index" @tap="getCurrentright(item1.question_type_id, index1, item1.question_type_name)">
				<text :class="[index == currentRightNum ? 'name_active' : '']">{{item.question_type_name}}</text>
				<i v-if="index == currentRightNum" class="iconfont iconduigou"></i>
			</view>
		</scroll-view>
		
		<view class="pop_bg" v-if="rightNavSwitch" @tap="closeNavSwitch" @touchmove.stop.prevent="moveHandle">
			<view class="pop_bg_item pop_bg_item_right">
				<view
					class="left_item"
					v-for="(item1, index1) in allType"
					:key="index1"
					@tap.stop="getCurrentright(item1.question_type_id, index1, item1.question_type_name)"
					:class="[index1 == currentRightNum ? 'left_item_active' : '']"
				>
					<!-- 	{{item1.questype}} -->
					<rich-text :nodes="item1.question_type_name"></rich-text>
					<view v-if="index1 == currentRightNum">
						<text class="iconfont iconduigou icon_cur"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '../../common/util.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			curAnswer: [], // 当前展开的答案
			centerNavExhibition: '来源',
			leftNavExhibition: '科目',
			rightNavExhibition: '类型',
			sid: '',
			question_typeid: '',
			source_type: '',
			page:1,
			status: 'more',
			reload: true,
			
			
			dontFinshPop: true,
			currentLeftNum: 0,
			currentRightNum: 0,
			currentCenterNum: 0,
			leftNavSwitch: false,
			rightNavSwitch: false,
			centerNavSwitch: false,
			allType: [],
			allProject: [],
			allfrom: [{ source_type: '', title: '全部' }, { source_type:1, title: '作业' }, { source_type:2, title: '自测' }, { source_type: 3, title: '同步' },{ source_type: 4, title: '趣练' },{ source_type: 5, title: '智测' }],
			datas: [],
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: "没数据"
			},
			student_id: ''
		};
	},
	components: {
		uniLoadMore
	},
	onPullDownRefresh() {
		this.reload = true;
		this.page=1;
		this.last_id = '';
		this.getlist();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
		
	},
	onReachBottom() {
		this.status = 'loading';
		this.page=this.page+1;
		var _this=this;
		setTimeout(function(){
		_this.getlist();
		},500);
	},
	onLoad(e) {
		this.student_id = e.student_id;
		/**
		 * 题型列表
		 */
		this.$zapi.apiPost('user/currency.basic/questionTypeList').then(res=>{
				this.allType = res.data.data;
						// qtid 为0  选择为所有类型
				this.allType.unshift({ question_type_id: '', question_type_name: '全部' });		
		});
		/**
		 * 科目列表
		 */
		this.$zapi.apiPost('user/subject.Lists/subjectLists',{student_id:this.student_id}).then(res => {
			if (res.data.code == 200) {
				var data = res.data.data;
				var length = data.length;
				for (var i = 0; i <length; i++) {
					data[i]['subject_name'] = data[i]['subject_name'].replace(/\s+/g, "");
				}
				this.allProject = data;
				this.allProject.unshift({ sid: '', subject_name: '全部' });
			}
		});
		this.getlist();
	},
	methods: {
		showAnswer (id) { // 展示答案
			this.datas[id].is_show=!this.datas[id].is_show;
			this.$forceUpdate();
		},
		changeNav0() {
			console.log(this.leftNavSwitch);
			this.rightNavSwitch = false;
			this.centerNavSwitch = false;
			this.leftNavSwitch = !this.leftNavSwitch;
		},
		changeNav1() {
			this.leftNavSwitch = false;
			this.centerNavSwitch = false;
			this.rightNavSwitch = !this.rightNavSwitch;
		},
		changeNav2() {
			this.leftNavSwitch = false;
			this.rightNavSwitch = false;
			this.centerNavSwitch = !this.centerNavSwitch;
		},
		getCurrentleft(sid, index, subject) {
			this.reload = true;
			this.page=1;
			console.log('左');
			console.log(this.leftNavSwitch);
			this.leftNavSwitch = false;
			// sid 为0 为全部科目
			this.currentLeftNum = index;
			this.sid = sid;
			this.leftNavExhibition = subject;
			this.getlist();
		},
		getCurrentcenter(basicid, index, title) {
			this.reload = true;
			this.page=1;
			console.log('中');
			this.centerNavSwitch = false;
			// sid 为0 为全部科目
			this.currentCenterNum = index;
			this.source_type = basicid;
			this.centerNavExhibition = title;
			this.getlist();
		},
		getCurrentright(qtid, index, type) {
			this.reload = true;
			this.page=1;
			console.log('右');
			this.rightNavSwitch = false;
			this.currentRightNum = index;
			this.question_typeid = qtid;
			this.getlist();
			this.rightNavExhibition = type;
		},
		closeNavSwitch() {
			this.leftNavSwitch = false;
			this.rightNavSwitch = false;
			this.centerNavSwitch = false;
		},
		closePop() {
			this.dontFinshPop = false;
		},
		//  以上为控制弹窗的方法
		check_collect: function(id, question_id) {
				this.datas[id].is_check = !this.datas[id].is_check;
			if (this.datas[id].is_check) {
				this.$zapi.apiPost('user/Collection.users/CollectionAdd',{question_id:question_id}).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title: '添加收藏成功！',
							icon:'none'
						});
					}
				});
			} else {
				this.$zapi.apiPost('user/Collection.users/CollectionDetele',{question_id:question_id}).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title: '取消收藏成功！',
							icon:'none'
						});
					}
				});
			}
			/**
			 * 更新数组
			 */
			let leng = this.datas.length;
			this.datas.splice(leng);
		},
		getlist:function(){
			var data={pagesize:8,page:this.page,student_id:this.student_id};
			if(this.source_type!=''){
				data.source_type=this.source_type;
			}
			if(this.question_typeid!=''){
				data.question_typeid=this.question_typeid;
			}
			if(this.sid!=''){
				data.subjectid=this.sid;
			}
			this.$zapi.apiPost('user/Collection.users/CollectionLists',data).then(res=>{
					if(res.data.code==200 && res.data.data.data.length > 0){
						var data=res.data.data.data;
						var question_ids_string=res.data.data.question_ids_string;
						this.loaddata(data,question_ids_string);
					}else{
						if(this.reload){
							this.datas=[];
							uni.showToast({
								title: '还没有收藏的试题！',
								icon:'none'
							});
						}else{
							this.status='noMore';
						}
					}
			});
		},
		loaddata: function(list,question_ids_string) {
			this.$zapi.apiPost('user/question.Lists/questionList',{question_id:question_ids_string,is_get_answer:2,is_out_html:2}).then(res=>{
				if(res.data.code==200){
				var dataList=res.data.data.data;
				for(var i = 0; i < dataList.length; i++) {
					if(!dataList[i].answer_list) {
						dataList[i].answer_list = [];
					}
				}
				util.latex_reques(dataList,'question_title');//解析 试题标题 latex 公式转换
				util.latex_reques(dataList,'question_analysis');//解析 试题解析 latex 公式转换
				util.latex_answer(dataList,'answer_list');//解析答案选项 latex 公式转换
				
				for(let i=0;i<dataList.length;i++){
					dataList[i].interest_lists_log=[];
				}
				var da=util.getAnalysis(dataList);
				this.datas = this.reload ? da : this.datas.concat(da);
				/**
				 * 给题目默认是不收藏
				 */
				for (let i = 0; i < this.datas.length; i++) {
					this.datas[i].is_check = true;
					this.datas[i].is_show=false;
					for(let j=0;j<list.length;j++){
						if(this.datas[i].question_id==list[j].question_id){
							this.datas[i].source_type=list[j].source_type;
						}
					}
				}
				this.reload = false;
				this.status='more';
				console.log(this.datas);
				}
			});  
		}
	}
};
</script>

<style lang="stylus">
	page{
		background-color #FAFAFA
	}
.icon_more{transform:rotate(90deg); margin-left:14upx; margin-right:0}
.analysis_title{padding-left:16upx; border-left:2px solid #00D5A2; font-size:34upx; font-weight:bold; color:#333; letter-spacing: 1px; vertical-align: middle;}

.question_classify{background:#FF9900; color:#fff; text-align:center; border-radius:0px 0px 6px 6px; width:76upx; height:48upx;margin-left: 30upx;}
.question_text{font-size: 34upx;padding-left:30upx;}
	
.biaoqian{
	color:#ffffff;
	font-size:24upx;
	border-radius: 8upx;
	background: rgba(0, 172, 254, 1);
	padding:7upx 10upx;
	margin-right:10upx;
}
.jtext{
	color:#666;
	font-size:32upx;
}
.img{
	display:block;
	max-width:90%;
	margin:auto;

}

.content{
	width: 100%;
	height:100%
}
.nav_cont
	position: fixed
	top: 0
	left: 0
	width: 100%
	height: 100upx
	line-height: 100upx
	display: flex
	justify-content: flex-start
	align-items: center
	background-color: #FFFFFF
	border-bottom: 2upx solid #E5E5E5
	box-shadow 0upx 3upx 5upx rgba(0, 0, 0, .5)
	z-index 9
	.nav_cont_item
		display flex
		align-items center
		justify-content center
		width 32%
		.nav_item
			display flex
			border-right 1px solid #E5E5E5
			height 40upx
			align-items center
			position relative
			width 275upx
			justify-content center
			.nav_icon
				font-size 35upx
				color #999
			.nav_title
				font-size 35upx
				margin-left 10upx
			.nav_title_active
				color #00D5A2
		// .nav_item:after
		// 	display inline-block
		// 	position absolute
		// 	right -9upx
		// 	bottom -9upx
		// 	transform rotate(45deg)
		// 	content ""
		// 	border-width 10upx
		// 	border-style solid
		// 	border-color transparent transparent transparent black
		.nav_item_active:after
			border-color #fff #fff #fff #00adff
.nav{
	height: 100upx;
	width: 100%;
}
.title{
	display: flex;
	font-size: 32upx;
	color: #333333;
}
.topic{
	font-size: 30upx;
	color: #666666;
	line-height: 60upx;
}
.cont{
	width: 100%;
	margin-top: 122upx;
	z-index: 1;
}
.hr{
	width: 100%;
	height: 12upx;
	background: #FAFAFA;
}
.none {
	color: #999999;
	text-align: center;
	margin-top: 300upx;
	font-size: 36upx;
}
.item_content{
	width: 100%;
	padding: 10upx auto;
	margin-top: 12upx;
	background-color: #FFFFFF;
}
.isshow{
	background-color: #FAFAFA;
	width: 100%;
	padding-left: 30upx;
}
.answer_collect{
	display: flex;
	justify-content: space-between;
	margin: 30upx 0;
}
.correct{
	font-size: 32upx;
	color: #00D5A2;
}
.error{
	font-size: 32upx;
	color: #f10000;
}
.collect{
	display: flex;
	width:156upx;
	justify-content: center;
	border-radius:20px 0px 0px 0px;
	background:#00D5A2;
	color: #fff;
}
.collect i{
	font-size: 32upx;
	line-height: 50upx;
	margin-right:3px;
}
/**
 *点击收藏样式开始
 */
.active_collect{
	color: #00adff;
	display: flex;
	flex-direction: column;
	text-align: center;

}
.active_collect i{
	font-size: 48upx;
	line-height: 45upx;
}
/**
 *点击收藏样式结束
 */

.testing_error{
	display: flex;
	justify-content: space-between;
	border-top: 2upx solid #E5E5E5;
}
.error_number{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #999;
	font-size: 28upx;
	margin-left: 30upx;
}
.error_number i{
	transform: rotate(90deg);
}
.error_number text{
	color: #999;
	font-size: 28upx;
	margin: 0 8upx;
}
/* 弹窗 */
.nav_type {
	width: 100%;
	height: calc(100% - 88upx);
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 88upx;
	.type_item {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		height: 88upx;
		line-height: 88upx;
		padding: 0 40upx;
		color: #666666;
		font-size: 30upx;
		border-top: 2upx solid #E5E5E5;
	}
	.name_active {
		color: #FF9900;
	}
	.iconduigou {
		line-height: 88upx;
		color: #FF9900;
	}
}
</style>
